<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>部门列表</title>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/5.1.3/css/bootstrap.min.css}">
</head>
<body>
    <div class="container mt-4">
        <div class="row mb-3">
            <div class="col">
                <h2>部门管理</h2>
            </div>
            <div class="col-auto">
                <a th:href="@{/department/add}" class="btn btn-primary">添加部门</a>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>部门名称</th>
                            <th>描述</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr th:each="dept : ${departments}">
                            <td th:text="${dept.id}"></td>
                            <td th:text="${dept.name}"></td>
                            <td th:text="${dept.description}"></td>
                            <td>
                                <a th:href="@{/department/edit/{id}(id=${dept.id})}" class="btn btn-sm btn-warning">编辑</a>
                                <button class="btn btn-sm btn-danger" th:onclick="'deleteDepartment(' + ${dept.id} + ')'">删除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script th:src="@{/webjars/bootstrap/5.1.3/js/bootstrap.bundle.min.js}"></script>
    <script>
        function deleteDepartment(id) {
            if (confirm('确定要删除这个部门吗？')) {
                fetch('/department/delete/' + id, {
                    method: 'POST'
                }).then(response => response.text())
                .then(result => {
                    if (result === 'success') {
                        alert('删除成功');
                        location.reload();
                    } else {
                        alert('删除失败');
                    }
                });
            }
        }
    </script>
</body>
</html> 